<template>
	<div class="header">
		<div class="container">
			<img src="@/assets/logo.png">
			<div class="right">
				<ul>
					<!-- <li>
						<router-link to="/"><p>首页</p></router-link>
					</li>
					<li>
						<router-link to="/product"><p>产品中心</p></router-link>
					</li> -->
					<li>
						<router-link to="/" exact><p>首页</p></router-link>
					</li>
					<li>
						<router-link to="/product"><p>产品中心</p></router-link>
					</li>
					<li>
						<router-link to="/movies" ><p>电影</p></router-link>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "comHeader",
		data(){
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>
<style scoped>
	.header{
		width: 100%;
		height: 100px;
		background: #9f65b1;
	}
	.header img{
		display: block;
		width: 80px;
		float: left;
		margin-top: 10px;
	}
	.header .right{
		float: right;
		height: 100%;
	}
	.header .right ul{
		margin: 0;
	}
	.header .right ul li{
		display: block;
		height: 100%;
		float: left;
	}
	.header .right ul li p{
		font-size: 16px;
		color: #fff;
		font-weight: bold;
		padding: 0 18px;
		line-height: 100px;
	}
	.header .right ul li .router-link-active p{
		color: #e2ff00;
	}
</style>